<style>

    .user-item:hover{
        color:#1890FF;
    }
    #user-open{
        z-index: 200;
        font-style: normal;
        color: transparent;
        text-align: center;
        line-height: 36px;
    }
    #user-open-main {
        background:#ffffff;

        border-color: rgba(228, 228, 228, 1);
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.349019);

        margin-top:12px;
    }
    .head-one{
        margin-right: 0px
    }
    .head-two{
        height: 57px;
        width: 150px;
        position: absolute;
        right: 80px;
        top: 0;cursor:pointer;

    }
    .head-three{
        width: 40px;
        height:40px;
        border-radius: 40px;
        margin-top: 9px;
        margin-left: 20px;
    }
    .head-four{
        width:85px;
        height: 57px;
        float: right;
        padding-top: 7px;
        z-index: 1000;
        cursor: pointer;
    }
    .head-five{
        font-size: 12px;
        display: block;
    }
    .head-six{
        height: 56px;
        width: 79px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: rgb(232,58,64);
        cursor:pointer;
    }
    .head-seven{

        color: white;
        margin-left: 24px;
        margin-top: 5px;
    }
    .head-eight{
        width:100%;
        height:18px;
        color: white;
        font-size: 12px;
        text-align: center;
        position: relative;
        top:-2px;
        display: block
    }
    .head-nine{
        margin-top: 1px;
        margin-left: 4px;
        cursor:pointer;
    }
    .head-ten{
        width: 100%;
        height: 100%;

    }
    .telescopic-icon{
        color: rgba(0, 0, 0, 0.7) !important;
    }
    #cover{
        position:absolute;
        left:0px;
        top:0px;
        background:rgba(0, 0, 0, 0.4);
        width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height:100%;
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
        display:none;
        z-Index:999;
    }
    #modal{
        position:absolute;
        width:350px;
        height:165px;
        top:35%;
        left:50%;
        transform: translateX(-50%);
        background-color:#fff;
        display:none;
        cursor:pointer;
        z-Index:9999;
        border-radius: 5px;
    }
    .mask_first{
        display: flex;
    }
    .mask_first_left{
        width: 140px;
        height: 125px;
        text-align: center;
        padding-top: 30px;
    }
    .mask_first_left_img{
        width: 60px;
        height: 60px;
    }
    .mask_first_right{
        width: 252px;
        height: 125px;
    }
    .mask_first_right_title{
        color:#101010;
        font-size: 16px;
        font-weight: 700;
        height: 60px;
        font-style: normal;
        letter-spacing: 0px;
        text-decoration: none;
        line-height: 95px;
    }
    .mask_first_right_text{
        font-size: 12px;
        color: rgba(0, 0, 0, 0.88);
        margin-top: 5px;
    }
    .mask_second{
        height: 40px;
        background-color: #F0F2F5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        border-radius: 5px
    }
    .mask_second_btn_confirm{
        width: 80px;
        height: 30px;
        background-color: red;
        color: #ffffff;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
    }
    .mask_second_btn_cancel{
        width: 80px;
        height: 30px;
        background-color: #ffffff;
        color: black;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #91959A;
    }
    .menu-li:hover{
        background-color: #f5f5f5;
    }
    .menu-hide{
        width: 50px;
        height: 60px;
        position: absolute;
        right: 225px;
        z-index: 1000;
    }
    .menu-info{
        width: 145px;
        position: absolute;
        border: 1px solid #f0f0f0;
        font-size:12px;
        right: 79px;
        top: 62px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        z-index: 1000;
        border-radius: 5px;
    }
    .ml-div-one{
        padding-left: 5px;
        height: 25px;
        line-height: 25px;
    }
    .ml-div-two{
        padding-left: 5px;
        height: 25px;
        line-height: 25px;
        border-bottom: 1px solid #f0f0f0;
    }
    .ml-div-three{
        padding-left: 5px;
        height: 30px;
        line-height: 30px
    }
    .menu-li a{
        margin-left: 10px;
        color: black;
    }
    .nav-item{
        cursor: pointer;
    }
</style>


<nav class="main-header navbar navbar-expand navbar-light navbar-F1F2F6  border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav telescopic" style="position:relative;top:2px;left: 8px;" id="header-mbx">

        <li class="nav-item"  >
            <a id="open-close" class="nav-link" data-widget="pushmenu" href="#" data-action="hide"   style="" >
                <i class="iconfont icon-menu_fold" style="font-size:16px;width:24px;height:24px;"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="window-refresh"><i class="iconfont icon-refresh3" style="font-size:16px;width:24px;height:24px;"></i> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="crumb" style="font-size: 14px;color:#777777 !important;">
                <span>
                    面板主面 /
                </span>
                <span>
                    工作台
                </span>

            </a>
        </li>
    </ul>
    <div style="" id="main-nav">
        <ul >
            @if(isset($big_modules))
                @foreach ($big_modules as $k=>$v)
                    <li data-val="{{$k}}" class="bm-{{$k}} big-modules @if($k=="home") modules-active @endif ">{{$v}}</li>
                @endforeach
            @endif
        </ul>
    </div>


    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto head-one">

        <li class="nav-item">
            <a class="nav-link"  href="javascript:;" data-url="/#/news" id="news-bell">
                <i class="iconfont icon-home2" style="font-size:18px!important;"></i>
            </a>

        </li>

        <li class="nav-item">
            <a class="nav-link"  href="javascript:;" data-url="/#/news" id="news-bell">
                <i class="iconfont icon-Bell" style="font-size:18px!important;"></i>
            </a>

        </li>


        <li id="nav-user" class="nav-item"  style="position: relative">
            <a class="nav-link"  href="javascript:;" data-url="/#/news" id="news-bell">
                <i class="iconfont icon-LC_icon_user_line_1" style="font-size:20px!important;"></i>

                <span style="font-size:14px;color:#8c8c8c;position:relative;top:-3px;margin-left:4px;">
                    管理员
                    <i class="iconfont icon-down14" style=""></i>
                </span>
            </a>
            <div id="user-open" style="position: absolute;color:#555555;font-size:12px;display: none;right:0px">
                <div id="user-open-main">
                    <ul style="list-style: none;margin: 0;padding:8px 0px">
                        <li class="user-item" style="padding:0px 20px"><i style="font-size: 14px" class="iconfont icon-user6"></i>&nbsp; 个人中心</li>
                        <li style="border-bottom: 1px solid rgba(228, 228, 228, 1)"></li>
                        <li class="user-item logout" style="padding:0px 20px">
                            <i style="font-size: 14px" class="iconfont icon-logout1"></i>&nbsp; 退出登录
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
    <div id="yx-tab" style="position: fixed;top:57px;background:#fff;background:#ffffff;height:40px">
        <ul id="tab-list" style="list-style: none;padding:0">
        </ul>

    </div>
</nav>
<div style="height: 40px;"></div>


{{--页面的遮罩层--}}
<div id="cover"></div>
{{--页面的弹出框--}}
<div id="modal">
    <div class="mask_first">
        <div class="mask_first_left">
            <img src="/images/tips-warn.png" class="mask_first_left_img">
        </div>
        <div class="mask_first_right">
            <div class="mask_first_right_title">安全退出</div>
            <div class="mask_first_right_text">您确定要退出登录吗?</div>
        </div>
    </div>
    <div class="mask_second">
        <div id="logout" class="mask_second_btn_confirm">确定</div>
        <div id="close" class="mask_second_btn_cancel">取消</div>
    </div>
</div>


<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script>
    $("body").delegate("#nav-user","mousemove",function () {
        $(this).find("#user-open").slideDown(200);
    })
    $("body").delegate("#nav-user","mouseleave",function () {
        $(this).find("#user-open").slideUp(200)
    })
    $(".one").mouseover(function () {
        $(this).attr("src","/images/icon1-1.png")
    });

    $(".one").mouseleave(function () {
        $(this).attr("src","/images/icon1.png")
    });

    $(".logout").click(function (){
        window.location.href="/logout";
    })

    $(".telescopic").click(function () {
        if($(this).find(".flag").length > 0){
            $(".telescopic-icon").attr("class","fa fa-indent telescopic-icon  fa-lg")
        }else {
            $(".telescopic-icon").attr("class","fa fa-dedent telescopic-icon  fa-lg flag")
        }

    });

    function showlist() {
        $(".notice").addClass("show")
    }

    function hidelist() {
        $(".notice").removeClass("show")
    }

    $("#open").click(function() {
        cover.style.display = "block";   //显示遮罩层
        modal.style.display = "block";   //显示弹出层
    });

    $("#close").click(function() {
        cover.style.display = "none";   //隐藏遮罩层
        modal.style.display = "none";   //隐藏弹出层
    });

    $("#logout").click(function () {
        window.location.href = 'dashboard/logout'
    });

    //消息通知
    $("body").delegate("#news-bell","click",function () {
        var url = $('#news-bell').attr('data-url');
        window.location.href = url;
        window.location.reload();
    })

    //购物车
    $("body").delegate("#shop-cart","click",function () {
        var url = $(this).attr('data-url');
        window.location.href = url;
        window.location.reload();
    })


    $('.menu-info').hide();

    //头像栏鼠标移入
    $('.head-four').mouseenter(function () {
        $('.menu-info').show(500);
    })

    //头像栏鼠标移出
    $('.menu-info').mouseleave(function () {
        $(this).hide(500);
    })

    $('#open').mouseenter(function () {
        $('.menu-info').hide(1000);
    })

    $('.menu-hide').mouseenter(function () {
        $('.menu-info').hide(1000);
    })

    //退出登录
    $('.logout').click(function () {
        $('#open').click()
    })

    //个人中心
    $("body").delegate("#person","click",function () {
        var url = $(this).attr('href');
        window.location.href = url;
        window.location.reload();
    })

    //系统设置
    $("body").delegate("#setting","click",function () {
        var url = $(this).attr('href');
        window.location.href = url;
        window.location.reload();
    })

</script>
